<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Formdata对象的方法</title>
</head>
<body>
	 <!-- Formdata对象的方法：
	 	1、获取表单对象中属性的值：formData.get("key");
	 	2、设置表单对象中属性的值：formData.set("key","value");
	 	3、删除表单对象中属性的值：formData.delete("key");
	 	4、向表单中追加属性值：formData.append("key","value");
	 	注意：set和append方法的区别是，在属性已经存在的情况下，set会覆盖乙酉年键名的值，append会保留两个值。 -->


		
		<!-- 1、创建普通的html表单 -->
		<form  id="form">
			<input type="text" name="username">
			<input type="password" name="password">
			<input type="button" id="btn" value="提交">
		</form>
		<script type="text/javascript">
			// 获取按钮
			var btn = document.getElementById('btn');
			// 获取表单
			var form = document.getElementById('form');
			// 为按钮添加单击事件
			btn.onclick=function (){
				// 2、将普通html表单转换成表单对象
				var formData = new FormData(form);

				// 获取表单对象中属性的值
				console.log(formData.get("username"));
				// 设置表单对象中属性的值,如果设置的表单属性已经存在就会覆盖原有属性值
				formData.set("username","wangwu");
				// 设置表单对象中属性的值,如果设置的表单属性不存在就会创建这个属性值
				formData.set("age",20);
				// 删除表单对象中属性的值
				formData.delete("password");




				// 创建ajax对象，然后提交表单对象
				var xhr = new XMLHttpRequest();
				// 配置ajax对象(formData表单对象只能以post方式请求)
				xhr.open("post","http://localhost:3000/formData");
				// 发送ajax请求
				xhr.send(formData);
				// 监听xhr对象下面的onload对象
				xhr.onload=function (){
					// 对象http状态码进行判断
					if (xhr.status==200) {
						console.log(xhr.responseText);

					}


				}

				// 创建空的表单对象
				var f = new FormData();
				f.append("sex","男");
				console.log(f.get("sex"));






			}






		</script>






	
</body>
</html>